import {Button, Card, Col, Row, Table} from 'antd';
import {useSelector} from "react-redux";
import dayjs from 'dayjs'
function convert(n){
    if(!window.web || !n) return
    return window.web.web3.utils.fromWei(n, "ether");
}
function getRenderOrder(order,type){
    if(!window.web) return [];
    //1. 根据id排除已完成，取消
    let filterIds = [...order.CancelOrders,...order.FillOrders].map(item=>item.id)
    let paddingOrders =order.AllOrders.filter(item=>!filterIds.includes((item.id)))
    console.log(paddingOrders)
    //2. 是自己的
    const account = window.web.account
    if(type === 'own'){
        return paddingOrders.filter(item=>item.user === account)
    }else{
        return paddingOrders.filter(item=>item.user !== account)
    }
}
function converTime(t){
    return dayjs.unix(t).format('YYYY-MM-DD HH:mm:ss')
}
export default function Order(){
    const order = useSelector((state) => state.order);
    console.log(order)
    const dataSource = [
        {
            key: '1',
            timestamp: '胡彦斌',
            age: 32,
            address: '西湖区湖底公园1号',
        }
    ];
    const columns = [
        {
            title: '时间',
            dataIndex: 'timestamp',
            render: (timestamp) => <p>{converTime(timestamp)}</p>
        },
        {
            title: 'KWT',
            dataIndex: 'amountGet',
            render: (amountGet) => <b>{convert(amountGet)}</b>
        },
        {
            title: 'ETH',
            dataIndex: 'amountGive',
            render: (amountGive) => <b>{convert(amountGive)}</b>
        },
    ];
    const columns1 = [
        ...columns,
        {
            title:'操作',
            render: (item)=><Button type="primary" onClick={()=>{
                const {exchange,account} = window.web;
                exchange.methods.cancelOrder(item.id).send({from:account});
            }}>取消</Button>
        }
    ];
    const columns2 = [
        ...columns,
        {
            title:'操作',
            render: (item)=><Button danger onClick={()=>{
                const {exchange,account} = window.web;
                exchange.methods.fillOrder(item.id).send({from:account});
            }}>买入</Button>
        }
    ];
    return (
        <div>
            <Row>
                <Col span={8}>
                    <Card title="已完成的订单"  style={{margin:'10px'}}>
                        <Table dataSource={order.FillOrders} columns={columns} rowKey={row => row.id} bordered pagination={false}/>
                    </Card>
                </Col>
                <Col span={8}>
                    <Card title="我创建的订单"  style={{margin:'10px'}}>
                        <Table dataSource={getRenderOrder(order,'own')} columns={columns1} rowKey={row => row.id} bordered pagination={false}/>
                    </Card>
                </Col>
                <Col span={8}>
                    <Card title="其他人的订单"  style={{margin:'10px'}}>
                        <Table dataSource={getRenderOrder(order,'other')} columns={columns2} rowKey={row => row.id} bordered pagination={false}/>
                    </Card>
                </Col>
            </Row>
        </div>
    )
}